@charset "utf-8";
//layaflash
.family-layaflash{
    width: 100%;
    background-color:#8bc01f ;
    color: #ffffff;
    padding: 60px 0;
}


.layaflash-one-sp1{
     font-size:48px;
    font-weight: bold;
    color: #8BC01F;
    padding:0 14px;
    border-radius: 2px;
    background-color: #ffffff;
}

.layaflash-one-sp2{
     font-size: 30px;
     margin-left: 10px;
}

.layaflash-two{
    padding-left: 15px;
    opacity: 0;   
    animation: fade-in 4s ease 0s 1; 
    -webkit-animation: fade-in 4s ease 0s 1;
    -moz-animation: fade-in 4s ease 0s 1;
    -o-animation: fade-in 4s ease 0s 1;
    -ms-animation: fade-in 4s ease 0s 1;
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode: forwards;  
      -o-animation-fill-mode: forwards; 
      -ms-animation-fill-mode: forwards;   
      -moz-animation-fill-mode: forwards;
}

@keyframes fade-in{  
    0%{ opacity: 0;}
    100%{opacity:1;}
}

.layaflash-header-title{
    font-size: 24px;
    
}

.family-layaflash ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

.family-layaflash ul li{
    list-style: none;
    font-size: 16px;
    line-height: 30px;
    margin-bottom: 15px;
}

.layaflash-p{
    width: 100px;
    height: 34px;
    line-height: 34px;
    background-color: #e8f2d2;
    text-align: center;
    
    a{
        border-bottom: none;
    }
}

.flash-img{
    width: 320px;
    height: 320px;
    //margin-top: 84px;
    img{
        width: 100%;
    }
}

//layaplayer
.family-layaplayer{
     width: 100%;
    background-color:#3393df ;
    color: #ffffff;
    padding: 60px 0;
}

.layaplayer-one-sp1{
     font-size:48px;
    font-weight: bold;
    color: #3393df;
    padding:0 14px;
    border-radius: 2px;
    background-color: #ffffff;
}

.layaplayer-one-sp2{
     font-size: 30px;
     margin-left: 10px;
}

.player-img{
    width:250px ;
    height:250px ;
    img{
        width: 100%;
    }
}
.layaplayer-title{
    font-size:18px;
    font-weight: 700;
    opacity: 0;   
    animation: fade-in 4s ease 0s 1;
     animation-fill-mode:forwards; 
}

.layapalyer-text{
    font-size: 16px;
    line-height: 30px;
     opacity: 0;   
    animation: fade-in 4s ease 0s 1;
     animation-fill-mode:forwards; 
}
.player-imgone{
    width:250px ;
    height:250px ;
    padding-top: 74px;
    img{
        width: 100%;
    }
}


//family-list
.family-list{
    width: 100%;
    background-color:#ffffff ;
    color: #787878;
    padding: 80px 0;
}

.list-one-sp1{
     font-size:48px;
    font-weight: bold;
    color: #fff;
    padding:0 14px;
    border-radius: 2px;
    background-color: #3393df;
}


.list-one-sp2{
     font-size: 30px;
     margin-left: 10px;
     color:#3393df ;
}

.list1-instructions{
    font-size: 19px;
    line-height: 40px;
    padding-bottom: 10px;
     opacity: 0;   
    animation: fade-in 4s ease 0s 1;
     animation-fill-mode:forwards; 
}

.list1-title{
    font-size: 18px;
    color:#3393df;
    line-height: 30px;
    padding-bottom: 10px;
     opacity: 0;   
    animation: fade-in 4s ease 0s 1;
     animation-fill-mode:forwards; 
}

.list1-text{
    font-size: 14px;
    line-height: 20px;
     padding-bottom: 30px;
      opacity: 0;   
    animation: fade-in 4s ease 0s 1;
     animation-fill-mode:forwards;  
}

.list1-img{
    padding-left:118px ;
}

.family-nextlist{
    width: 100%;
    background-color:#f7f7f7 ;
    color: #787878;
    padding: 60px 0;
}
@media screen and (min-width:768px){
    .flash-img{
      width: 300px;
    height: 300px;
    margin-top: 100px;
    img{
        width: 100%;
    }
}
   
  .player-imgone{
    width:250px ;
    height:250px ;
    padding-top: 184px;
    img{
        width: 100%;
    }
} 
}


@media screen and (min-width:992px){
.player-imgone{
    width:250px ;
    height:250px ;
    padding-top: 95px;
    img{
        width: 100%;
    }
} 
}
